<script>
import { reactive, toRefs, ref, getCurrentInstance } from "vue";

import Table from "./components/Table.vue";
import MallModel from "../../components/3DModel/MallModel.vue";
export default {
  components: { Table, MallModel },
  setup() {
    const state = reactive({
      loading: false,
      total: 0,
      pageSize: 10000,
      tableData: [],
      tableLabel: ["cameraId", "cmItemno", "cmName", "cmPosFloor", "cmPosPlaneX", "cmPosPlaneY", "cmRecId", "cmRem", "cmStatusEnabled", "cmToGate", "cmVendor"],
      formDataGet: ["cameraId", "cmItemno", "cmName", "cmPosFloor", "cmPosPlaneX", "cmPosPlaneY", "cmRecId", "cmRem", "cmStatusEnabled", "cmToGate", "cmVendor"],
      formDataPost: ["cameraId", "cmItemno", "cmName", "cmPosFloor", "cmPosPlaneX", "cmPosPlaneY", "cmRecId", "cmRem", "cmStatusEnabled", "cmToGate", "cmVendor"],
      formDataPut: ["cameraId", "cmItemno", "cmName", "cmPosFloor", "cmPosPlaneX", "cmPosPlaneY", "cmRecId", "cmRem", "cmStatusEnabled", "cmToGate", "cmVendor"],
      mapLabel: { "cameraId": "摄像头 ID", "cmItemno": "摄像头编号", "cmName": "摄像头名称", "cmPosFloor": "摄像头所在楼层", "cmPosPlaneX": "摄像头平面坐标 X", "cmPosPlaneY": "摄像头平面坐标 Y", "cmRecId": "摄像头记录 ID", "cmRem": "摄像头备注", "cmStatusEnabled": "摄像头状态", "cmToGate": "摄像头所属闸机 ID", "cmVendor": "摄像头厂商" },
    });
    const mallModelRef = ref();
    const tableRef = ref();

    const { proxy } = getCurrentInstance();

    const getTableData = async (currentPage, queryKey) => {
      state.loading = false
      const params = {
        pageNum: currentPage,
        pageSize: state.pageSize
      }
      const data = await proxy.$API.sysConfig.sysCameraList.get(params)
      state.total = data.total
      state.tableData = data.rows
      state.loading = true
    };

    const postTableData = async (data) => {
      const res = await proxy.$API.sysConfig.sysCameraPost.post(data)
      if (res.code == 200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    const deleteTableData = async (data) => {
      const params = {
        id: data.cmRecId,
      }
      const res = await proxy.$API.sysConfig.sysCameraDelete.delete(params)
      if (res.code == 200) {
        //调用成功
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(data.msg);
      }
    };

    const putTableData = async (row, data) => {

      const res = await proxy.$API.sysConfig.sysCameraPut.put(data)

      if (res.code == 200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    const cellClick = (row) => {
      mallModelRef.value.selectTable(row.cmName);
    };


    return { ...toRefs(state), mallModelRef, tableRef, getTableData, postTableData, deleteTableData, putTableData, cellClick };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never" class="model-warpper">
      <MallModel ref="mallModelRef" :cameraData="tableData" v-if="loading" />
    </el-card>

    <el-card shadow="never" style="margin-top: 20px">

      <Table ref="tableRef" deleteButton :tableLabel="tableLabel" :tableData="tableData" :mapLabel="mapLabel"
        :total="total" :pageSize="pageSize" :formDataGet="formDataGet" :formDataPost="formDataPost"
        :formDataPut="formDataPut" @getTableData="getTableData" @postTableData="postTableData"
        @deleteTableData="deleteTableData" @putTableData="putTableData" @cell-click="cellClick" />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}

.model-warpper {
  width: 100%;
  height: 600px;
}
</style>